Github上这个开源仓库火了！

大家好，我是D哥

点击关注世界公众号，Java面试资料都在这里

最近，D哥逛Github发现一个有趣的开源仓库：Js sequence diagrams ，估计不少同学都能用得上。目前，已有 7.4k star，是一个方便建立UML的时序图（序列图/循序图）在线工具，使用特别简单，纯 JavaScript 打造！

还有，D哥发现在任意 GitHub 仓库按下“.” 即可跳转至 VScode 预览该 Repo 所有文件，并进行编辑，这个功能有点酷！

下图便是效果图：

Js sequence diagrams 可以很方便的将简单的文本行绘制成手绘风（或是简单的直线条）的流程图，不需要复杂的数据结构只需要利用一段简单的脚本，就可以生成想要的时序图，脚本内容如下：

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

效果如下图：

嗯……

不过对于设计师来说不是十分实用哈，毕竟设计大佬们能自己徒手画，但对于咱们这些程序员来说，太有用了，目前该仓库还支持中文字体，不过需要把 theme 改为 simple ，感兴趣的同学可以尝试一下~

# 如何安装？

该仓库依赖于Snap.svg,web font loader,underscore.js,jQuery等，为了大家安装方便，建议使用官网推荐的bower，进行安装。

bower可以打包下载工程包，避免漏掉某些依赖库；安装bower之前必须先安装node，npm和git。

1、安装node，npm和git去链接到的官网上download后按照提示一直next就ok。

2、打开终端命令行。输入node -v和npm -v检验自己是否安装成功，若成功会显示版本号

3、在终端里输入 npm install -g bower  安装bower

4、cd address 打开项目所在路径（就是你想把代码包下载到的地方）

5、下载结束后指定路径下出现一个叫做bower_components的文件夹，里面就是使用js-sequence-diagrams所需的各种文件了。

运行bower install bramp/js-sequence-diagrams并包含以下脚本：

<script  src =" {{ bower 目录}}/bower-webfontloader/webfont.js " />
 <script  src =" {{ bower 目录}}/snap.svg/dist/snap.svg-min.js " />
 <script  src =" {{ bower 目录}}/underscore/underscore-min.js " />
 <script  src =" {{ bower 目录}}/js-sequence-diagrams/dist/sequence-diagram-min.js " />

如果你要使用手绘主题，还需要导入 CSS：

<link  href =" {{凉亭目录}}/js-sequence-diagrams/dist/sequence-diagram-min.css " rel ="样式表" />

# 如何使用？

由于js-sequence-diagrams基于 Snap.svg 和 Underscore.js（或者 lodash）。你可以手动下载这些文件，也可以使用 bower install bramp/js-sequence-diagrams。

然后在代码中包含下列 HTML 代码：

<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>

然后你现在有两个选择，你可以手动解析文本：

<div id="diagram"></div>
<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("diagram", {theme: 'hand'});
</script>

也可以使用 jQuery 解析文本：

<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>

说实话，js-sequence-diagrams 的语法一点儿都不难，只需要啪啪啪几行代码，就可使用了，目前不少技术网站的 Markdown 也开始支持 js-sequence-diagrams了！

项目地址：https://github.com/bramp/js-sequence-diagrams

官方体验地址：https://bramp.github.io/js-sequence-diagrams

参考

https://github.com/bramp/js-sequence-diagrams

https://blog.csdn.net/u012814856/article/details/81459939

技术交流群

D哥也了一个技术群，主要针对一些新的技术和开源项目值不值得去研究和IDEA使用的“骚操作”，有兴趣入群的同学，可以长扫描区域二维码，一定要注意事项：城市+昵称+技术方向，根据格式备注，可快速通过。

▲长按扫描

热门推荐：